<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/public/public.css" />
		<style>
		.tit{
			float: left;
			min-width: 60px;
			height: 44px;
		}
		.search{
			overflow: hidden;
		}
		.search-input{
			height: 30px;
			margin: 7px 0;
			border: 1px solid #fff; 
			border-radius: 5px;
			line-height: 30px;
		} 
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<h1 class="mui-title" id="title">
				<div class="tit"><span class="addr">地区</span><span class="mui-icon mui-icon-arrowdown arrowdown mui-hidden"></span></div>
				<div class="search">
					<div class="search-input">
						<div class="mui-icon mui-icon-search"></div>
					</div>
				</div> 
			</h1>
			<a class="mui-icon mui-icon-compose mui-pull-right" id="rightbtn" data-forword = './pages/indexpage/newactivity.html'></a>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="./pages/indexpage/active.html" data-right-icon='mui-icon mui-icon-compose mui-pull-right' data-riconforword='./pages/indexpage/newactivity.html'>
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">同客</span>
			</a>
			<a class="mui-tab-item" href="./pages/messages/msgpage.html" data-right-icon='mui-icon mui-icon-chatbubble mui-pull-right' data-riconforword='./pages/messages/newmsg.html'>
				<span class="mui-icon mui-icon-chat">
					<!--<span class="mui-badge"> 1</span>-->
				</span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="./pages/find/findpage.html" data-right-icon='mui-icon mui-icon-search mui-pull-right' data-riconforword='./pages/find/findsearch.html'>
				<span class="mui-icon mui-icon-navigate"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" href="./pages/myself/myselfpage.html" data-right-icon='mui-pull-right' data-riconforword=''>
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav> 
		<script type="text/javascript" src="js/utils/tools.js" ></script>
		<script type="text/javascript" src="js/libs/jquery.min.js" ></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var subpages = ['./pages/indexpage/active.html', './pages/messages/msgpage.html', './pages/find/findpage.html', './pages/myself/myselfpage.html'];
			var subpage_style = {
				top: '44px',
				bottom: '50px' 
			};
			var aniShow = {};
			var first = null;
			 //创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				for (var i = 0; i < 4; i++) {
					var temp = {};
					var start = subpages[i].lastIndexOf('/');
					var end = subpages[i].indexOf('.html');
					var pageid = subpages[i].substring(start + 1, end);
					var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
					if (i > 0) {
						sub.hide();
					} else {
						temp[subpages[i]] = "true";
						mui.extend(aniShow, temp);
					}
					self.append(sub);
				}
				var preloads = [];
				var item = document.querySelectorAll('.mui-tab-item');
				var len = item.length;
				for(var i = 0;i<len;i++){
					preloads.push(item[i].getAttribute('data-riconforword'))
				}
				plus.geolocation.getCurrentPosition(function(pos){
//					console.log(JSON.stringify(pos))
					$('.addr').text(pos.address.city);
//					$('.addr').text('上海')
					$('.arrowdown').removeClass('mui-hidden');
				},function(){},{
					provider:'baidu',
					timeout:60000,
					maximumAge:600000
				})
				preload(preloads);
				iflog();
			});
			var activeTab = subpages[0];
			var title = document.getElementById("title");
			 //选项卡点击事件
			var modulepages1 = [];
			var modulepages2 = [];
			var modulepages3 = [];
			var modulepages4 = [];
			var modulepages5 = [];
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var forword = this.getAttribute('data-riconforword');
				var targetTab = this.getAttribute('href');
				if (targetTab == activeTab) {
					return;
				}
				//更换标题
				title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
				document.getElementById('rightbtn').className = this.getAttribute('data-right-icon');
				document.getElementById('rightbtn').setAttribute('data-forword',forword);
				//显示目标选项卡
				if (mui.os.ios || aniShow[targetTab]) {
					plus.webview.show(targetTab);
				} else {
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow, temp);
					plus.webview.show(targetTab, "fade-in", 300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
				
			});
			window.addEventListener('hideHead',function(){
				$('#header').css({
//					'background-color':'red',
					'z-index':-1
				})
			})
			mui('#header').on('tap','#rightbtn',function(){
				var url = this.getAttribute('data-forword')
				var pageid = getwebid(url);
//				mui.openWindow(url,pageid);
				plus.webview.getWebviewById(pageid).show('slide-in-right',300)
			})
			mui.back = function() {
				if (!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出应用');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if (new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			};
		</script>
	</body>

</html>